<template>
  <div class="mystyle">
    <h3>欢迎来到解约合同录入页面</h3>
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="退租物业交割单" name="first">
          <h4>退租物业交割单</h4>

          <el-form :inline="true" :model="contractDeleteForm" class="demo-form-inline">

            <el-form-item label="*收房合同号">
              <el-input v-model="contractDeleteForm.contractId" placeholder="收房合同号"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="warning" @click="searchContract">收房合同查询</el-button>
            </el-form-item>
            <br>

            <el-form-item label="*收房合同编号">
              <el-input v-model="contractDeleteForm.sfContractNo" placeholder="收房合同编号"></el-input>
            </el-form-item>

            <el-form-item label="*房产信息">
              <el-input v-model="contractDeleteForm.houseName" placeholder="房产信息"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*产权地址">
              <el-input v-model="contractDeleteForm.cqAddress" placeholder="产权地址"></el-input>
            </el-form-item>

            <el-form-item label="*房产证书编号">
              <el-input v-model="contractDeleteForm.houseZsNo" placeholder="房产证书编号"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*业主姓名">
              <el-input v-model="contractDeleteForm.ownerName" placeholder="业主姓名"></el-input>
            </el-form-item>

            <el-form-item label="*业主联系方式">
              <el-input v-model="contractDeleteForm.ownerMobile" placeholder="业主联系方式"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*签约人姓名">
              <el-input v-model="contractDeleteForm.signUserName" placeholder="签约人姓名"></el-input>
            </el-form-item>

            <el-form-item label="*签约人电话">
              <el-input v-model="contractDeleteForm.signUserMobile" placeholder="签约人电话"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*物业交割时间">
              <el-date-picker
                v-model="contractDeleteForm.wyjgDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="*解约类型">
              <el-select v-model="contractDeleteForm.terminationType" placeholder="解约类型">
                <el-option label="合同到期" value=1></el-option>
                <el-option label="我方提前解约" value=2></el-option>
                <el-option label="租客提前解约" value=3></el-option>
                <el-option label="其他" value=4></el-option>
              </el-select>
            </el-form-item>
            <br>
            <hr>

            应退<br>
            <el-form-item label="*应退类型">
              <el-select v-model="contractDeleteForm.refundType" placeholder="应退类型">
                <el-option label="租金" value=2></el-option>
                <el-option label="冷水" value=3></el-option>
                <el-option label="电" value=4></el-option>
                <el-option label="燃气/煤气" value=5></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="*金额(元)">
              <el-input v-model="contractDeleteForm.tui" placeholder="金额(元)"
                        @change="changetotalprice(contractDeleteForm.tui)"></el-input>
            </el-form-item>

            <el-form-item label="*备注">
              <el-input v-model="contractDeleteForm.beizhu" placeholder="备注"></el-input>
            </el-form-item>
            <br>
            <hr>

            应收<br>
            <el-form-item label="*应收类型">
              <el-select v-model="contractDeleteForm.payType" placeholder="应收类型">
                <el-option label="违约金" value=6></el-option>
                <el-option label="租金" value=2></el-option>
                <el-option label="冷水" value=3></el-option>
                <el-option label="电" value=4></el-option>
                <el-option label="燃气/煤气" value=5></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="*金额(元)">
              <el-input v-model="contractDeleteForm.shou" placeholder="金额(元)"
                        @change="changeshouprice(contractDeleteForm.shou)"></el-input>
            </el-form-item>

            <el-form-item label="*备注">
              <el-input v-model="contractDeleteForm.beizhus" placeholder="备注"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="备注:">
              <div class="text-area">
                <textarea placeholder="请输入备注" v-model="contractDeleteForm.remark"></textarea>
              </div>
            </el-form-item>


            <h3 style="color:orange ">合计(应退):{{ totalprice }}元</h3>

            <el-button @click="cancel">取消解约</el-button>
            <el-button @click="queren">确认解约</el-button>

          </el-form>
        </el-tab-pane>
        <el-tab-pane label="解约状态" name="second">
          <span v-if="this.data==200" style="color: #1ab394">合同解约成功!</span>
          <span v-if="this.data!=200" style="color: red">合同解约失败!</span>
        </el-tab-pane>
      </el-tabs>
    </template>

    <!--  弹出收房合同-->
    <el-dialog title="收房合同列表" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="form">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="form.premiseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名" :label-width="formLabelWidth">
          <el-input v-model="form.ownerName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchlist">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="contractData">
        <el-table-column property="ownerName" label="业主姓名" width="150"></el-table-column>
        <el-table-column property="premiseName" label="房产信息" width="200"></el-table-column>
        <el-table-column property="leaseStartTime" label="签约日期"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="chooseContract(scope.row)">选中</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import * as sf from '@/api/harvest/sf.js';


export default {
  name: "index",
  data() {
    return {
      activeName: "first",
      //合同解约
      contractDeleteForm: {
        beizhu: "无",
        beizhus: "无",
        finalStatement: 0.00,
        statementList: []
      },
      pageSize: 10,
      //收房合同数据
      contractData: [],
      dialogTableVisible: false,
      total: 0,
      pageNum: 1,
      totalprice: 0,
      data: 0,
      form: {},
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchlist();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchlist();
    },
    //页签
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //点击按钮查询收房合同
    searchContract() {
      this.dialogTableVisible = true;
    },
    //查找合同
    searchlist() {
      sf.sfContractSearch(this.form, this.pageNum, this.pageSize).then(res => {
        this.contractData = res.data.list;
        this.total = res.data.total;
      })
    },
    //选中的合同
    chooseContract(row) {
      console.log(row);
      this.contractDeleteForm.leaseStartTime = row.leaseStartTime;
      this.contractDeleteForm.sfContractNo = row.sfContractNo;
      this.contractDeleteForm.houseName = row.premiseName;
      this.contractDeleteForm.cqAddress = row.cqAddress;
      this.contractDeleteForm.houseZsNo = row.houseZsNo;
      this.contractDeleteForm.ownerName = row.ownerName;
      this.contractDeleteForm.ownerMobile = row.ownerMobile;
      this.contractDeleteForm.signUserName = row.signUserName;
      this.contractDeleteForm.signUserMobile = row.signUserMobile;
      this.dialogTableVisible = false;
    },
    //加上应退
    changetotalprice(tui) {
      this.contractDeleteForm.finalStatement = parseFloat(this.contractDeleteForm.finalStatement) + parseFloat(tui);
      this.totalprice = parseFloat(this.totalprice) + parseFloat(tui);
      let temp = {};
      temp.dealType = 1;
      temp.itemType = this.contractDeleteForm.refundType;
      temp.amount = this.contractDeleteForm.tui;
      this.contractDeleteForm.statementList[0] = temp;
    },
    //加上应收
    changeshouprice(show) {
      this.contractDeleteForm.finalStatement = parseFloat(this.contractDeleteForm.finalStatement) - parseFloat(show);
      this.totalprice = parseFloat(this.totalprice) - parseFloat(show);
      let temp = {};
      temp.dealType = 2;
      temp.itemType = this.contractDeleteForm.payType;
      temp.amount = this.contractDeleteForm.shou;
      this.contractDeleteForm.statementList[1] = temp;
    },
    //解约
    queren() {
      sf.saveSfTermination(this.contractDeleteForm).then(res=>{
        this.$message.success("操作成功");
        this.contractDeleteForm = {};
      })
    },
    //取消解约
    cancel() {
      this.$router.go(0);
    }
  },
  created() {
    this.searchlist();
  }
}
</script>

<style scoped>
.mystyle {
  margin-left: 50px;
}

.text-area {
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
}
</style>
